// 公共样式
export const commonStyle = {
    rotate: 0,
    opacity: 1,
}

export const commonAttr = {
    animations: [],
    events: {},
    groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
    isLock: false, // 是否锁定组件
    collapseName: 'style', // 编辑组件时记录当前使用的是哪个折叠面板，再次回来时恢复上次打开的折叠面板，优化用户体验
    linkage: {
        duration: 0, // 过渡持续时间
        data: [ // 组件联动
            {
                id: '', // 联动的组件 id
                label: '', // 联动的组件名称
                event: '', // 监听事件
                style: [{ key: '', value: '' }], // 监听的事件触发时，需要改变的属性
            },
        ],
    },
}

const list = [
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/1.svg'),
            prodUrl: '/fabric/1.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 300,
            height: 10,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/2.svg'),
            prodUrl: '/fabric/2.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 10,
            height: 300,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/3.svg'),
            prodUrl: '/fabric/3.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 300,
            height: 30,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/4.svg'),
            prodUrl: '/fabric/4.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 300,
            height: 30,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/5.svg'),
            prodUrl: '/fabric/5.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 30,
            height: 300,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/6.svg'),
            prodUrl: '/fabric/6.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 30,
            height: 300,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/7.svg'),
            prodUrl: '/fabric/7.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 70,
            height: 80,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/8.svg'),
            prodUrl: '/fabric/8.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 70,
            height: 80,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/9.svg'),
            prodUrl: '/fabric/9.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 70,
            height: 80,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/10.svg'),
            prodUrl: '/fabric/10.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 70,
            height: 80,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/11.svg'),
            prodUrl: '/fabric/11.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 75,
            height: 75,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/12.svg'),
            prodUrl: '/fabric/12.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 75,
            height: 75,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/13.svg'),
            prodUrl: '/fabric/13.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 75,
            height: 75,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/14.svg'),
            prodUrl: '/fabric/14.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 75,
            height: 75,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/15.svg'),
            prodUrl: '/fabric/15.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 20,
            height: 120,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/16.svg'),
            prodUrl: '/fabric/16.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 120,
            height: 20,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/17.svg'),
            prodUrl: '/fabric/17.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 20,
            height: 120,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/18.svg'),
            prodUrl: '/fabric/18.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 120,
            height: 20,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/19.svg'),
            prodUrl: '/fabric/19.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 90,
            height: 70,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/20.svg'),
            prodUrl: '/fabric/20.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 90,
            height: 70,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/21.svg'),
            prodUrl: '/fabric/21.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 80,
            height: 40,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/22.svg'),
            prodUrl: '/fabric/22.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 40,
            height: 80,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/23.svg'),
            prodUrl: '/fabric/23.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 110,
            height: 100,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/24.svg'),
            prodUrl: '/fabric/24.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 170,
            height: 90,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/25.svg'),
            prodUrl: '/fabric/25.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 130,
            height: 100,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/26.svg'),
            prodUrl: '/fabric/26.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 360,
            height: 10,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/27.svg'),
            prodUrl: '/fabric/27.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 10,
            height: 360,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/28.svg'),
            prodUrl: '/fabric/28.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 40,
            height: 40,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/29.svg'),
            prodUrl: '/fabric/29.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 105,
            height: 95,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/30.svg'),
            prodUrl: '/fabric/30.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 85,
            height: 115,
            borderRadius: '',
        },
    },
    {
        component: 'Picture',
        label: '图片',
        icon: 'tupian',
        isImage: true,
        propValue: {
            url: require('@/assets/fabric/31.svg'),
            prodUrl: '/fabric/31.svg',
            flip: {
                horizontal: false,
                vertical: false,
            },
        },
        style: {
            width: 120,
            height: 105,
            borderRadius: '',
        },
    },
]

for (let i = 0, len = list.length; i < len; i++) {
    const item = list[i]
    item.style = { ...commonStyle, ...item.style }
    list[i] = { ...commonAttr, ...item }
}

export default list
